<template>
    <div class="warp-box">
    <el-row class="search-box" :gutter="10">
      <!-- <el-col :span="5">
        <el-input size="small" placeholder="关键词"></el-input>
      </el-col> -->
      <el-col :span="10">
        <!-- <el-button size="small" type="primary" @click="handleSearch">搜索</el-button> -->
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建类型</el-button>
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
        <el-col :span="24">
            <el-table
            :data="dataList"
            border
            v-loading="loading"
            :row-class-name="tableRowClassName"
            style="margin-top:14px;"
            >
            <el-table-column show-overflow-tooltip prop="typeName" label="分类名称"></el-table-column>
            <el-table-column prop="createDate" label="创建时间">
                <template slot-scope="scope">
                    <span>{{scope.row.createDate | formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column width="80" align="center" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="handleEdit(scope.row)" size="mini" type="text" icon="el-icon-edit"></el-button>
                    <a-popconfirm
                    title="是否确认删除?"
                    @confirm="handleDelete(scope.row)"
                    okText="是"
                    cancelText="否"
                    >
                    <el-button @click.stop="" size="mini" type="text" icon="el-icon-delete"></el-button>
                    </a-popconfirm>
                </template>
            </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <addDialog :addData="addData" @checkRender="checkRender"></addDialog>
  </div>
</template>

<script>
import addDialog from './addCompanyTypeDialog' //新增修改类型
export default {
    data() {
        return {
            loading: false,
            parames: {

            },
            dataList: [],
            value: '',
            addData: {
                title: '',
                id: '',
                type: '',
                data: {},
                show: false
            },
            value2:'',
            
        };
    },
    mounted() {
        this.render()
    },
    methods: {
        handleAdd () { //新增
            this.addData.title = "新增"
            this.addData.type = "new"
            this.addData.typeName = ''
            this.addData.id = ''
            this.addData.show = true
        },
        handleEdit (row) { //修改
            this.addData.title = "编辑"
            this.addData.id = row.id
            this.addData.typeName = row.typeName
            this.addData.type = "edit"
            this.addData.show = true
        },
        handleDelete (row) { //删除
            this.$post(this.$api.postCustomerBaseInfoInCompanyTypeDel,{
                companyTypeId: row.id
            }).then(response => {
                if (response.data.succeed) {
                    setTimeout(() => {
                        this.render()
                    }, 200);
                }
            })
        },
        checkRender () {
            this.render()
        },
        handleSearch () {
            this.render()
        },
        render () { //获取所有类型
            this.loading = true
            this.$post(this.$api.postCustomerBaseInfoInCompanyTypeList,this.parames).then(response => {
                if (response.data.succeed) {
                    this.dataList = response.data.data
                    setTimeout(() => {
                        this.loading = false
                    }, 200);
                }
            })
        },
        tableRowClassName({ row, rowIndex }) {
        //斑马表格
        if (rowIndex % 2 === 1) {
            return "warning-row";
        } else {
            return "success-row";
        }
        return "";
        }
    },
    components: {
        addDialog
    },
};
</script>

<style scoped>

</style>
